<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>首页 - 驴妈妈流立方</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!-- ace settings handler -->
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />

	</head>

	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small"  style="height:60px">
						<div class="clearfix">
							<div class="pull-left tableTools-container" style="margin-left:10px;margin-top:15px;">
								<button class="btn btn-sm btn-primary" onclick="skip('${rc.contextPath}/webStatistics/add')"><i class="ace-icon fa fa-pencil-square-o align-top bigger-125"></i>添加规则</button>
							</div>
							<div class="pull-left tableTools-container" style="margin-left:30px;margin-top:15px;">
								<button class="btn btn-sm btn-primary" onclick="skip('${rc.contextPath}/webStatistics/maintenance')"><i class="ace-icon fa fa-pencil-square-o align-top bigger-125"></i>维护规则</button>
							</div>
					   </div>
					</div>
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<form class="form-inline" id="searchForm" method="post" action="${rc.contextPath}/webStatistics/firstScreenTimeCount">
									<!--  <input id="chooseTimeVO" type="hidden" name="chooseTimeVO" value="${H5pageMonitorVO.chooseTimeVO}">
									 <input id="rule1" type="hidden" name="rule1" value="${H5pageMonitorVO.rule}">  -->
									<div class="form-group">
										<label for="exampleInputName2"></label> 
									</div>
									<div class="form-group">
										<label for="exampleInputName2">选择时段</label> 
										<input type="text" id="config-demo" name="config-demo" class="form-control time">
										<!-- <button id="app_search" type="button"  onclick="replaceDate('1');" class="btn btn-white btn-sm">
											<span class="ace-icon icon-on-right bigger-110"></span>
											过去一周
										</button>
										<button id="app_search" type="button"  onclick="replaceDate('2');" class="btn btn-white btn-sm">
											<span class="ace-icon icon-on-right bigger-110"></span>
											过去两周
										</button> -->
									</div>
									<div class="form-group">
										<label for="exampleInputName2">查询规则</label> 
										<select data-placeholder="" class="chosen-select" tabindex="2" name="rule" id="rule" style="width:250px">
											<#list ruleTypeList as rule>
												<option value="${rule.id}" <#if H5pageMonitorVO.rule== rule.id>selected</#if>>${rule.name}</option>
											</#list>
										</select>
									</div>
									<div class="form-group">
									  	<button id="search" type="button" class="btn btn-pink btn-sm">
											<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
											Search
										</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			        <!--  首屏 - 渠道版本-->
					<div class="row">
						<div class="col-xs-12">
							<div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="channelBar" style="width:100%;height:400px;"></div>
										</div>
										
									</div>
								</div>
							</div>
							
							 <div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="channelBarOne" style="width:100%;height:400px;"></div>
										</div>
									</div>
								</div>
							</div> 
						</div>
					</div>
					
					 <!--  首屏 - 运营商-->
					<div class="row">
						<div class="col-xs-12">
							
							 <div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="operatorBar" style="width:100%;height:400px;"></div>
										</div>
									</div>
								</div>
							</div> 
							
							<div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="operatorBarTwo" style="width:100%;height:400px;"></div>
										</div>
										
									</div>
								</div>
							</div>
						</div>
					</div>
					
				  <!--  首屏-网络制式-->
				  <div class="row">
						<div class="col-xs-12">
							 <div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="networkBar" style="width:100%;height:400px;"></div>
										</div>
									</div>
								</div>
							</div>
							
							 <div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="networkBarThree" style="width:100%;height:400px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
				</div>
				
				
				 <!--  首屏-地域-->
				  <div class="row">
						<div class="col-xs-12" >
							 <div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box" >
									<div class="widget-body">
										<div class="widget-main">
											<div id="prvoinceBar" style="width:100%;height:600px;"></div>
										</div>
									</div>
								</div>
							</div>
							
							 <div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="prvoinceBarFour" style="width:100%;height:600px;"></div>
										</div>
									</div>
								</div>
							</div> 
					</div>
				</div>  
					
		 </div>

		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		
		<!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap.min.css"> -->
		<!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-theme.min.css"> -->
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
		<script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
	   	
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/china.js"></script>
	   	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script type="text/javascript">
		 function replaceDate(obj){
    		if(obj == '1'){
    			startDate = new Date(new Date().getTime()-7*1000*60*60*24);
	    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
    		}else if(obj == '2'){
    			startDate = new Date(new Date().getTime()-14*1000*60*60*24);
	    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
    		}
		 	var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
		    $("#chooseTimeVO").val(dateStr);
		    $(".time").val(dateStr);
    	}
		
			function dateFormat(date){
	    		var month = date.getMonth() + 1;
    		    var strDate = date.getDate();
    		    if (month >= 1 && month <= 9) {
    		        month = "0" + month;
    		    }
    		    if (strDate >= 0 && strDate <= 9) {
    		        strDate = "0" + strDate;
    		    }
    		    var currentdate = month + "/" + strDate + "/" + date.getFullYear();
    		    return currentdate;
	    	}

			
			jQuery(function($) {
				$('.time').daterangepicker(
						{
							startDate: new Date(new Date().getTime()-1*1000*60*60*24),
						    endDate: new Date(new Date().getTime()-1*1000*60*60*24),
							showDropdowns : true,
							showWeekNumbers : false,
							timePicker : false,
							timePicker12Hour : false,
							ranges : {
								'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				            	'过去7天': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],  
				                '过去31天': [moment().subtract(31, 'days'), moment().subtract(1, 'days')]
							},
							opens : 'right',
							buttonClasses : [ 'btn btn-default' ],
							applyClass : 'btn-small btn-pink blue',
							cancelClass : 'btn-small',
							format : 'yyyy-MM-dd',
							separator : ' to ',
							locale : {
								applyLabel : '确定',
								cancelLabel : '取消',
								fromLabel : '起始时间',
								toLabel : '结束时间',
								customRangeLabel : '自定义',
								daysOfWeek : [ '日', '一', '二', '三', '四', '五',
										'六' ],
								monthNames : [ '一月', '二月', '三月', '四月', '五月', 
										'六月', '七月', '八月', '九月', '十月', '十一月',
										'十二月' ],
								firstDay : 1
							}
						},
						function(start, end, label) {//格式化日期显示框  

							$('.time').html(
									start.format('yyyy-MM-dd') + ' - '
											+ end.format('yyyy-MM-dd'));
						});
				
				/*  var chooseTimeVO = "${H5pageMonitorVO.chooseTimeVO}";
				if(chooseTimeVO != ""){
					$('#config-demo').val(chooseTimeVO);
				}  */
				
				/* 数值每3位，逗号隔开 */
				function formatNum(strNum) {
					if (strNum.length <= 3) {
						return strNum;
					}
					if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
						return strNum;
					}
					var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
					var re = new RegExp();
					re.compile("(\\d)(\\d{3})(,|$)");
					while (re.test(b)) {
						b = b.replace(re, "$1,$2$3");
					}
					return a + "" + b + "" + c;
				}
				
			})
	       
			
			option1 = {
	   			    title: {
	   			        text: 'H5首屏耗时占比-版本'
	   			    },
	   			    tooltip: {
	   			        trigger: 'axis'
	   			    },
	   			    legend: {
	   			        data:['H5','IOS','Android','其它']
	   			    },
	   			    toolbox: {
	   			        show: true,
	   			        feature: {
	   			            dataView : {show: true, readOnly: false},
		  		            saveAsImage : {show: true}
	   			        }
	   			    },
	   			   calculable : true,
	   			   xAxis: [
	   			        {
	   			            type: 'category',
	   			            data: [ '0-1s','1-2s','2-3s','3-4s','4-5s','5-8s','8s以上']
	   			        }
	   			    ],
	   	  		   yAxis : [
	  	  		        {
	  	  		        	type: 'value',
		   			        axisLabel: {
		   			            formatter: '{value}%'
		   			        }
	  	  		        }
	  	  		    ],
	   			    series: [
	   			        {
	   			            name:'H5',
	   			            type:'bar',
	   			            data:[],
	   			        },
	   			        {
	   			            name:'IOS',
	   			            type:'bar',
	   			            data:[],
	   			        },
	   			        {
	   			            name:'Android',
	   			            type:'bar',
	   			            data:[],
	   			        },
	   			       {
	   			            name:'其它',
	   			            type:'bar',
	   			            data:[],
	   			        },
	   			    ]
	   			};
			
			
			
			optionOne = {
					color: ['#3398DB'],
	   			    title: {
	   			        text: 'H5首屏耗时占比-版本-样本量'
	   			    },
	   			    legend: {
	   			        data:['H5','IOS','Android','其它']
	   			    },
		   			tooltip : {
		   		        trigger: 'axis',
		   		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		   		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		   		        }
		   		    },
	   			    grid: {
	   		        left: '3%',
	   		        right: '4%',
	   		        bottom: '3%',
	   		        containLabel: true
	   		       },
	   			    toolbox: {
	   			        show: true,
	   			        feature: {
	   			            dataView : {show: true, readOnly: false},
		  		            saveAsImage : {show: true}
	   			        }
	   			    },
	   			   calculable : true,
	   			   xAxis: [
	   			        {
	   			            type : 'category',
	   			            data : ['H5','IOS','Android','其它'],
	   			            axisTick: {
	   		                alignWithLabel: true
	   		               }
	   			        }
	   			    ],
	   	  		   yAxis : [
	  	  		        {
	  	  		        	type: 'value',
	  	  		        }
	  	  		    ],
	   			    series: [
	   			        {
	   			            type:'bar',
	   			            barWidth: '50%',
	   			            data:[],
	   			        },
	   			    ]
	   			};
			
			
			 option2 = {
					title: {
	   			        text: 'H5首屏耗时占比-运营商'
	   			    },
	   			    tooltip: {
	   			        trigger: 'axis'
	   			    },
	   			    legend: {
	   			        data:['中国移动','中国联通','中国电信','其它']
	   			    },
	   			    toolbox: {
	   			        show: true,
	   			        feature: {
	   			            dataView : {show: true, readOnly: false},
		  		            saveAsImage : {show: true}
	   			        }
	   			    },
	   			   calculable : true,
	   			   xAxis: [
	   			        {
	   			            type: 'category',
	   			            data: ['0-1s','1-2s','2-3s','3-4s','4-5s','5-8s','8s以上']
	   			        }
	   			    ],
				yAxis : [ {
					type: 'value',
   			        axisLabel: {
   			            formatter: '{value} %'
   			        }
				} ],
				series : [ {
					name : '中国移动',
					type : 'bar',
					data : [],
				}, {
					name : '中国联通',
					type : 'bar',
					data : [],
				}, {
					name : '中国电信',
					type : 'bar',
					data : [],
				}, {
					name : '其它',
					type : 'bar',
					data : [],
				} ]
			};
			 
			 optionTwo = {
						color: ['#3398DB'],
		   			    title: {
		   			        text: 'H5首屏耗时占比-运营商-样本量'
		   			    },
		   			    legend: {
		   			        data:['中国移动','中国联通','中国电信','其它']
		   			    },
		   			   tooltip : {
			   		        trigger: 'axis',
			   		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			   		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			   		        }
			   		    },
		   			   grid: {
		   		        left: '3%',
		   		        right: '4%',
		   		        bottom: '3%',
		   		        containLabel: true
		   		       },
		   			    toolbox: {
		   			        show: true,
		   			        feature: {
		   			            dataView : {show: true, readOnly: false},
			  		            saveAsImage : {show: true}
		   			        }
		   			    },
		   			   xAxis: [
		   			        {
		   			            type : 'category',
		   			            data : ['中国移动','中国联通','中国电信','其它'],
		   			            axisTick: {
		   			                alignWithLabel: true
		   			            }
		   			        }
		   			    ],
		   	  		   yAxis : [
		  	  		        {
		  	  		        	type: 'value',
			   			        axisLabel: {
			   			            formatter: '{value}'
			   			        }
		  	  		        }
		  	  		    ],
		   			    series: [
		   			        {
		   			            type:'bar',
		   			            barWidth: '50%',
		   			            data:[],
		   			        },
		   			    ]
		   			};

			
			option3 = {
					title: {
	   			        text: 'H5首屏耗时占比-网络制式'
	   			    },
	   			    tooltip: {
	   			        trigger: 'axis'
	   			    },
	   			   legend: {
	   			        data:['2G', '3G', '4G', 'wifi', '其它']
	   			    },
	   			    toolbox: {
	   			        show: true,
	   			        feature: {
	   			            dataView : {show: true, readOnly: false},
		  		            saveAsImage : {show: true}
	   			        }
	   			    },
	   			   calculable : true,
	   			   xAxis: [
	   			        {
	   			            type: 'category',
	   			            data: ['0-1s','1-2s','2-3s','3-4s','4-5s','5-8s','8s以上']
	   			        }
	   			    ],
				   yAxis : [ {
					type: 'value',
   			        axisLabel: {
   			            formatter: '{value} %'
   			        }
				} ],
				series : [ {
					name : '2G',
					type : 'bar',
					data : [],
				}, {
					name : '3G',
					type : 'bar',
					data : [],
				}, {
					name : '4G',
					type : 'bar',
					data : [],
				}, {
					name : 'wifi',
					type : 'bar',
					data : [],
				},
				{
					name : '其它',
					type : 'bar',
					data : [],
				},]
			};
			
			
			optionThree = {
					color: ['#3398DB'],
	   			    title: {
	   			        text: 'H5首屏耗时占比-网络制式-样本量'
	   			    },
	   			   tooltip : {
		   		        trigger: 'axis',
		   		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		   		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		   		        }
		   		    },
	   			   grid: {
	   		        left: '3%',
	   		        right: '4%',
	   		        bottom: '3%',
	   		        containLabel: true
	   		       },
	   			    toolbox: {
	   			        show: true,
	   			        feature: {
	   			            dataView : {show: true, readOnly: false},
		  		            saveAsImage : {show: true}
	   			        }
	   			    },
	   			   xAxis: [
	   			        {
	   			            type : 'category',
	   			            data : ['2G', '3G', '4G', 'wifi', '其它'],
	   			            axisTick: {
	   			                alignWithLabel: true
	   			            }
	   			        }
	   			    ],
	   	  		   yAxis : [
	  	  		        {
	  	  		        	type: 'value',
		   			        axisLabel: {
		   			            formatter: '{value}'
		   			        }
	  	  		        }
	  	  		    ],
	   			    series: [
	   			        {
	   			            type:'bar',
	   			            barWidth: '50%',
	   			            data:[],
	   			        },
	   			    ]
	   			};
			
			
			option4 = {
				    title: {
				        text: 'H5首屏耗时占比-地域(Top20)',
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    legend: {
				        data: ['平均时间']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
				        boundaryGap: [0, 0.01],
				        axisLabel : {
							formatter : '{value} s'
						}
				    },
				    
				    yAxis: {
				    	type : 'value',
				        type: 'category',
				        data: []
				    },
				    series: [
				        {
				        	name : '',
							type : 'bar',
				            data: []
				        },
				      
				    ]
				}; 
			
			
			 optionFour = {
					color: ['#3398DB'],
				    title: {
				        text: 'H5首屏耗时占比-地域(Top20)-样本量',
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    legend: {
				        data: ['平均时间']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
				    },
				    
				    yAxis: {
				    	type : 'value',
				        type: 'category',
				        data: []
				    },
				    series: [
				        {
				        	name : '',
							type : 'bar',
				            data: []
				        },
				      
				    ]
				};

				$("#search").click(function(){
					 var rule1 = $("#rule").val();
					 var chooseTimeVO = $('#config-demo').val();
					 $.ajax({
			    		   url: "${rc.contextPath}/webStatistics/ajaxfirstScreenTimeCount",
			    		   dataType:"json",
			    		   type : "POST",
						   data : {
								chooseTimeVO : chooseTimeVO,								
								rule : rule1
							}, 
			    		   success: function(data){
			    			   if(data!=null){ 
			    				   if (data.code=='1') {
				   	                	showMsg("查询成功！");
				   	                } else {
				   	                	showMsg("查询失败！ 可能没有数据");
				   	                }
			    				   
			    				    var myChart1 = echarts.init(document.getElementById('channelBar'));
			    				    var myChartOne = echarts.init(document.getElementById('channelBarOne'));
			    				    var myChart2 = echarts.init(document.getElementById('operatorBar'));
			    				    var myChartTwo = echarts.init(document.getElementById('operatorBarTwo'));
			    					var myChart3 = echarts.init(document.getElementById('networkBar'));
			    					var myChartThree = echarts.init(document.getElementById('networkBarThree'));
			    					var myChart4 = echarts.init(document.getElementById('prvoinceBar'));
			    					var myChartFour = echarts.init(document.getElementById('prvoinceBarFour'));
							  	 	
									option1.series[0].data=data.H5Data;
									option1.series[1].data=data.IOSData;
									option1.series[2].data=data.AndroidData;
									option1.series[3].data=data.noneChannelData;
								 	myChart1.setOption(option1,true);
								 	
								 	optionOne.series[0].data=data.channelDataTotal;
								 	myChartOne.setOption(optionOne,true);
								 	
								 	option2.series[0].data=data.cmData;
								    option2.series[1].data=data.cuData;
								    option2.series[2].data=data.ctData;
								    option2.series[3].data=data.noneOperatorsData;
									myChart2.setOption(option2,true);
									
									optionTwo.series[0].data=data.operatorDataTotal;
									myChartTwo.setOption(optionTwo,true);
								 	
									option3.series[0].data=data.twoGData;
									option3.series[1].data=data.threeGData;
									option3.series[2].data=data.fourGData;
									option3.series[3].data=data.wifiData;
									option3.series[4].data=data.noneNetWorkTypeData;
								 	myChart3.setOption(option3,true);
								 	
								 	optionThree.series[0].data=data.netWorkTypeDataTotal;
									myChartThree.setOption(optionThree,true);
								 	
									option4.yAxis.data = data.province;
							        option4.series[0].data=data.avgTimeDate;
							        myChart4.setOption(option4,true);
							        
							        optionFour.yAxis.data = data.province;
							        optionFour.series[0].data=data.amountDate;
							        myChartFour.setOption(optionFour,true);
							  	 	
							  	    window.onresize = function(){
							  	    	myChart1.resize();
							  	    	myChartOne.resize();
									    myChart2.resize();
									    myChartTwo.resize();
										myChart3.resize();
										myChartThree.resize();
										myChart4.resize();  
										myChartFour.resize();
							  	  } 
			    			  }
			    		   }
				   		}); 
               });
		</script>


		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" /> 
		<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
		
		<script>
			 $(function() {
		        $('.chosen-select').chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
		     }); 
	      	
			 function statistics(){
				$('#statistics').show();
				$('.chosen-select').chosen("destroy").chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
			 }
	    </script>
	    
	</body>
</html>